import React from 'react'
import { useRef } from 'react'
import {connect } from "react-redux"
import { nanoid } from 'nanoid'
 function Person(props) {
   const {persons, addPerson} = props
   const name = useRef()
   const age = useRef()
   const addP = () => {
    const person = {id:nanoid(), name:name.current.value,  age:age.current.value }
    addPerson(person)
   }
  return (
    <div>
      <h2>Person组件</h2>
      <input type="text" ref={name} />
      <input type="text" ref={age} />
      <button onClick={addP}>添加</button>
      <br />
      <ul>
        {
          persons.map(p => {
            return <li key={p.id}>姓名: {p.name}, 年龄:{p.age}</li>
          })
        }
        
      </ul>
    </div>
  )
}


export default connect(
  state => ({persons: state.persons}),
  dispatch => ({
    addPerson: (personObj) => dispatch({type:'addPerson', data: personObj})
  })
)(Person)